<template>
    <div class="seeOpinion">
        <div class="seeOpinion-middle1" v-show="tableData.length > 0" ref="seeOpinionMiddle1">
            <van-list v-model="loading" finished-text="没有更多了">
                <van-cell v-for="(item, index) in tableData" :key="index" style="border-radius: 10px;margin-top: 14px;">
                    <ul class="seeOpinion-middle">
                        <li class="seeOpinion-middle2">
                            {{ item.cityName }}
                            <span style="float: right;">{{ item.signStatus | inUseName(Enum.QSZT) }} </span>
                        </li>
                        <li class="seeOpinion-middle3">
                            签收意见：{{ item.signAdvice }}
                        </li>
                    </ul>
                </van-cell>
            </van-list>

        </div>
        <div v-show="tableData.length == 0" style="height: 90vh; text-align: center; padding-top: 20vh">
            <div style="margin-bottom: 10px">
                <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
            </div>
            <div>暂无数据</div>
        </div>
        <div class="seeOpinion-footer">
            <van-button block color="dodgerblue" @click="close()" style="width: 100%;">返回</van-button>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    name: "seeOpinion",
    data() {
        return {
            BaseUrl: window.g.BaseURL,
            tableData: [],
            Enum: {
                QSZT: [{
                    name: "未签收",
                    value: 0
                }, {
                    name: "已签收",
                    value: 1
                }, {
                    name: "结束",
                    value: 2
                }]
            },
        }
    },
    props: ['taskNo'],
    filters: {
        inUseName: function (msg, data) {
            let name = ''
            data.forEach(item => {
                if (item.value == msg) {
                    name = item.name
                }
            })
            return name
        },
    },
    components: {},
    methods: {},
    beforeDestroy() { }
}
</script>
<style lang="scss" scoped>
.seeOpinion {
    height: 100vh;
    overflow: auto;
    background: #eee;
    width: 100vw;
    font-family: 黑体;
    font-size: 18px;
    padding: 6px 10px;

    .title {
        width: 100%;
        height: 46px;
        background: #007aff;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        font-size: 20px;
    }

    .seeOpinion-footer {
        width: 99%;
        margin-top: 4px;
        margin: 0 auto;
        padding-top: 12px;
        display: flex;
        justify-content: space-between;

        .van-button {
            width: 47%;
        }
    }

    .seeOpinion-middle1 {
        height: 90vh;
        overflow: auto;

        .seeOpinion-middle {
            background-color: #fff;
            width: 98%;
            margin: 0 auto;

            .seeOpinion-middle2 {
                font-size: 18px;
                font-weight: 1000;
                color: black;
                line-height: 36px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .seeOpinion-middle3 {
                font-size: 14px;
                color: #aaa;
                line-height: 24px;
                clear: both;
                overflow: hidden;

                span {
                    float: right;
                    // padding-left: 4vw;
                }
            }

            .seeOpinion-middle4 {
                font-size: 14px;
                color: #aaa;
                line-height: 24px;

                span {
                    float: right;
                    // padding-left: 4vw;
                }
            }
        }
    }
}
</style>
<style>
.seeOpinion .van-tab {
    font-size: 18px;
}
</style>
